$(function () {
    // ***********************加载用户列表\

    let laypage;
    let layer;
    let form;
    layui.use(['layer', 'form', 'laypage'], function () {
        layer = layui.layer;
        form = layui.form;
        laypage = layui.laypage;
        let data = {
            pagenum: 1,
            pagesize: 5,
        };

        function getUser() {
            $.ajax({
                url: '/admin/users',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        $('tbody').html('')
                        $.each(res.data, function (index, item) {
                            let tr = $(`<tr>
                                      <td>${item.id}</td>
                                      <td>${item.username}</td>
                                      <td>${item.nickname}</td>
                                      <td>${item.email}</td>
                                      <td>
                                        <button type="button" class="layui-btn layui-btn-xs ">
                                          <a style="color: #fff" target="iframeArea" href="./edit.html?id=${item.id}&username=${item.username}&nickname=${item.nickname}&email=${item.email}">编辑</a>
                                        </button>
                                        <button type="button"  data_id="${item.id}"class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                                        <button type="button"  data_id="${item.id}" class="layui-btn layui-btn-xs layui-btn-normal chongzhi">重置密码</button>
                                      </td>
                                    </tr>`)
                            $('tbody').append(tr)
                        });
                        bar(res.total);

                    }
                }
            })
        }
        getUser()

        // 分页器
        function bar(total) {
            laypage.render({
                elem: 'articlePage', //注意，这里的 test1 是 ID，不用加 # 号
                count: total, //数据总数，从服务端得到
                limit: data.pagesize, // limit限制 每页显示几条数据
                curr: data.pagenum, //设定的页数
                jump: function (obj, first) {
                    if (!first) {
                        data.pagenum = obj.curr;
                        data.pagesize = obj.limit;
                        getUser()
                    }
                },
            });
        };


        // ************************删除用户

        $('tbody').on('click', '.delete', function () {
            let id = $(this).attr('data_id')
            layer.confirm('确定要删除么?', function (index) {
                $.ajax({
                    url: '/admin/users/' + id,
                    type: 'DELETE',
                    success: function (res) {
                        if (res.status == 0) {
                            // 删除成功提示
                            layer.msg(res.message);
                            //重回第一页
                            data.pagenum = 1;
                            // 再次渲染用户列表
                            getUser()
                            // 关闭特定层
                            layer.close(index);
                        }
                    }
                })
            })
        })


        // ***********************重置密码的form表单
        let str = `<form id="repwd-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="password" name="password" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
          <input type="password" required lay-verify="required" placeholder="请重复输入新密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;

        $('tbody').on('click', '.chongzhi', function () {

            let id = $(this).attr('data_id')
            // 准备弹窗
            let index = layer.open({
                type: 1,
                title: "重置密码",
                content: str,
                area: ['500px', '270px'],
            });
            $('#repwd-form').on('submit', function (e) {
                // 阻止默认行为
                e.preventDefault()

                let data = $(this).serialize()
                // console.log(data);   
                let mima = data.split('=')
                // console.log(mima);
                $.ajax({
                    url: '/admin/users/' + id,
                    type: 'PUT',
                    data: {
                        password: mima[1]
                    },
                    success: function (res) {
                        // 重置成功提示
                        layer.msg(res.message);
                        // 关闭特定层
                        layer.close(index);
                    }
                })
            })
        })


    })
})